import React, { useState, useMemo } from 'react';
import { Row, Col, Card, Alert } from 'antd';
import ListReport from './ReportTable';
import EmplDataChart from '@/components/report/emplDataChart';
type PropField = {
  sdate: Date | string;
  edate: Date | string;
  cyno: string;
  timeLevel: string;
  emplLevel: string;
  emplID: number;
  colName: string;
  groupCalc: string;
};
const EmplAnalysis: React.FC<PropField> = (props) => {
  const [{ emid, emnm }, setCuid] = useState({ emid: null, emnm: '' });
  const listReport = useMemo(() => {
    const paramVals: Record<string, any> = {
      date: props.edate,
      cyno: props.cyno,
      emplLevel: props.emplLevel,
      emplID: '' + props.emplID,
      colName: props.colName,
    };
    let reptName = 'yzb_empl_chan';
    if (props.groupCalc === 'avg') {
      reptName = 'yzb_empl_chan_avg';
      paramVals.sdate = props.sdate;
      paramVals.edate = props.edate;
    } else if (props.groupCalc === 'sum') {
      reptName = 'yzb_empl_chan_sum';
      paramVals.sdate = props.sdate;
      paramVals.edate = props.edate;
    }
    let unit = 0;
    if (props.colName.startsWith('NUM_')) {
      unit = 1;
    }
    return (
      <ListReport
        reportName={reptName}
        hideParamBar={true}
        paramVals={paramVals}
        height={400}
        canPage={true}
        canPageSize={true}
        canSelectItems={false}
        canClearFilter={false}
        canExport={true}
        refresh={true}
        onSelectChange={async (_keys: React.Key[], rows: Record<string, any>[]) => {
          setCuid({ emid: rows[0].EMID, emnm: rows[0].EMNM });
        }}
        unit={unit}
      />
    );
  }, [
    props.colName,
    props.cyno,
    props.edate,
    props.emplID,
    props.emplLevel,
    props.groupCalc,
    props.sdate,
  ]);
  return (
    <Row style={{ marginTop: 10 }} key="yjpm">
      <Col key="1" span={12} style={{ paddingRight: 10 }}>
        {listReport}
      </Col>
      <Col key="2" span={12}>
        <Card size="small" title={emnm}>
          {emid ? (
            <EmplDataChart
              sdate={props.sdate}
              edate={props.edate}
              cyno={props.cyno}
              timeLevel={props.timeLevel}
              emplLevel="user"
              emplID={emid}
              colName={props.colName}
              groupCalc={props.groupCalc}
              vertical={true}
              key="sub_empl"
            />
          ) : (
            <Alert message="员工数据分析" description="请在左面选择员工" type="info" />
          )}
        </Card>
      </Col>
    </Row>
  );
};
export default EmplAnalysis;
